<script setup lang="ts">
import { ref, computed, watch, inject} from 'vue';
import homeCarousel from "@/views/demo/components/home-carousel/index.vue";
import homeTab from "@/views/demo/components/home-tab/index.vue";
import bannerTabs from "@/views/demo/components/banner-tabs/index.vue";
import homeFooter from "@/views/demo/components/home-footer/index.vue";
import homePopup from "@/views/demo/components/home-popup/index.vue";

const popupRef = ref();
const activeTab = ref(0);
// const showFooter=ref(false);
const footer = ref(false);
const hasShownFooter = ref(false);
// const dianzan = ref(false);
const setFooter = () => {
    if (!hasShownFooter.value) {
        footer.value = true;
        hasShownFooter.value = true;
    }
}

const closeFooter = () => {
    footer.value = false;

}

const openModal = () => {
    popupRef.value?.openModal();
};

watch(activeTab, (newValue) => {
    console.log('activeTab 发生变化：', newValue);
});


// const dianzan = inject('hasClicked');
// console.log(dianzan);/
// watch(()=>dianzan, (newValue) => {
//     console.log('demo收到点赞', newValue);
//     // if (!hasShownFooter.value) {
//     //     footer.value = true;
//     //     hasShownFooter.value = true;

//     //     console.log('demo收到点赞', newValue);
//     // }
// });
</script>

<template>
    <!-- 整个页面 -->
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <div class="header-nav">
                <img src="@/assets/nav_icon_backblack@2x.png" alt="backgroud" />
                <div v-if="activeTab == 0" class="title1">孩子王年度甄选打榜赛</div>
                <div v-if="activeTab == 1" class="title2">1218品牌打榜赛</div>
            </div>
            <!-- 轮播图 -->
            <homeCarousel />
            <img class="banner-hidden" src="@/assets/banner前遮挡@3x.png" alt="hidden" />
        </div>

        <!-- banner -->
        <homeTab v-model:activeTab="activeTab" />
        <bannerTabs :activeTab="activeTab" @msg-to-demo="setFooter" />
        <!-- <bannerTabs :activeTab="activeTab" /> -->

        <!-- <bannerLists ref="bannerListsRef" /> -->

        <!-- 点赞礼 -->
        <div class="thumbs-up1" v-if="activeTab == 0" @click="openModal">
            <img src="@/assets/1备份.png" alt="thumbs-up" class="thumbs-img">
        </div>
        <div class="thumbs-up2" v-if="activeTab == 0" @click="openModal">
            <img src="@/assets/1备份.png" alt="thumbs-up" class="thumbs-img">
        </div>

        <!-- 底部 -->
        <homeFooter @footer-to-demo="closeFooter" v-if="activeTab == 0" :class="{ 'hidden': !footer }" />

        <!-- 弹窗 -->
        <homePopup ref="popupRef" />
    </div>

</template>

<style scoped>
.container {
    width: 750px;
    min-height: 100vh;
    background-color: #da193e;
}

.header {
    display: flex;
    display: relative;
    justify-content: center;
    width: 100%;
    height: 500px;
    background: url('@/assets/头部背景@3x.png') no-repeat;
    background-size: 750px 500px;

    .header-nav {
        display: flex;
        position: absolute;
        width: 100%;
        top: 106px;

        img {
            width: 44px;
            height: 44px;
            margin-left: 24px;
        }

        .title1 {
            margin-left: 127px;
            line-height: 50px;
            font-size: 36px;
            font-weight: bold;
            color: #FFFFFF;
        }

        .title2 {
            margin-left: 180px;
            line-height: 50px;
            font-size: 36px;
            font-weight: bold;
            color: #FFFFFF;
        }
    }
}

.banner-hidden {
    position: absolute;
    width: 100%;
    height: 168px;
    top: 397px;
}

.thumbs-up1 {
    width: 120px;
    height: 120px;
    position: fixed;
    bottom: 350px;
    right: 20px;
    z-index: 30;
}

.thumbs-img {
    width: 100%;
    height: 100%;
}

.thumbs-up2 {
    width: 120px;
    height: 120px;
    position: fixed;
    bottom: 207px;
    right: 20px;
    z-index: 30;
}

.hidden {
    display: none;
}
</style>
